<template>
  <div :class="{'notice-is-active':active}" class="header-tip-notice">
    <div  :style="{color:contentColor}" style="line-height: 12px;display: table-cell;vertical-align: top;">
      <div>
        <span style="font-size: 10px;zoom: 0.83" :style="{color:title}">[系统提示]</span>
        <span style="float:right;font-size: 8px;zoom: 0.67">{{content.date}}</span>
      </div>
      <div style="margin-top:3px;">
        <span style="font-size: 10px;zoom: 0.83">{{getMessage(content.message)}}</span>
        <span style="font-size: 12px;margin-left: 4px" :style="{color:numColor}">{{ content.number }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "headerTipContent",
  inject: ['rootHeaderTip'],
  props: {
    index: String,
    type: {
      type:Number,
      default:0,
    },
    content: {
      type:Object,
      default: _=>({})
    },
  },
  computed: {
    getMessage(){
      return message=>{
        return message.length>40?`${message.slice(0,70)}...`:message
      }
    },
    active() {
      return this.index === this.rootHeaderTip.currentIndex
    },
    contentColor(){
      const theme = this.$store.getters.theme
      if(theme === 'light'){
        return this.type === 0 ?  '#CCCCCC' : '#666666'
      }else{
        return this.type === 0 ?  '#5C6B9A' : '#FFFFFF'
      }
    },
    title(){
      const theme = this.$store.getters.theme
      if(theme === 'light'){
        return this.type === 0 ?  '#CCCCCC' : '#3370FF'
      }
    },
    numColor(){
      const theme = this.$store.getters.theme
      if(theme === 'light'){
        return this.type === 0 ?  '#CCCCCC' : '#FC5A5A'
      }else{
        return this.type === 0 ?  '#5C6B9A' : '#FC5A5A'
      }
    }
  }
}
</script>

<style scoped>

</style>
